<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<!DOCTYPE html>
<html lang="zh-CN">
  
  <head>
    
    <%@ include file="/WEB-INF/include/meta.jsp"%>
    <%@ include file="/WEB-INF/include/css.jsp"%>
    <style type="text/css">
      .about-title {
        position: relative;
        padding-top: .75rem;
        height: 3.2rem;
        text-align: center;
      }
      .about-title:after {
        content: '';
        display: block;
        position: absolute;
        top: 2rem;
        left: 3rem;
        right: 3rem;
        height: 0;
        border-top: 1px solid #b5b5b5;
        border-bottom: 1px solid #e7e7e7;
    }
    
    .about-title h5 {
        position: absolute;
        display: inline-block;
        left: 50%;
        top: 1.5rem;
        padding: 0 .8rem;
        margin: 0 auto;
        background-color: #F6F7F9;
        z-index: 1;
        transform: translateX(-50%);
        -webkit-transform: translateX(-50%);
      }
    </style>
    
  </head>
  <!-- end header -->
  <body>
    <div class="page-group">
        <div class="page page-current">
           
      <header class="bar bar-nav fs-header-small" style="background-color: #F6F7F9;">
        <%-- <a href="${ctx.host}/profile" class="icon icon-left pull-left"></a> --%>
        <h1 class="title" style="color: #333;">
          <c:choose>
            <c:when test="${not empty user.name}">
              ${user.name}
            </c:when>
            <c:otherwise>
              ${user.profile.nickname}
            </c:otherwise>
          </c:choose>
        </h1>
      </header>
      <!-- end header -->

      <div class="content" style="background-color: #F6F7F9;">
        
        <div class="card-wapper" style="margin: .8rem 0; height: 7rem; position: relative;">
            <div class="card-bg" style="background-color: #FEDC31; width: 100%; height: 100%;"></div>
            <div class="number-card" style="position: absolute; top: -.8rem; bottom: -.8rem; left: 2rem; right: 2rem; background-color: #313030;border-radius: .4rem;box-shadow: 1px 1px 1px #313030;">
              <div class="card-top clearfix">
                <img src="${ctx.resource}/image/logo.png" alt="" style="float: left;height: 2rem;padding-left: .5rem;padding-top: .5rem;" />
                <span style="float: right;margin-top: .5rem;line-height: 1.5rem;margin-right: .5rem;color: #fff;">FITSTART</span>
              </div>
              <div class="card-middle" style="height: 5rem;">
                <img alt="" src="${ctx.resource}/image/member-card/card-content-bg.png" style="display: block;height: 5rem;margin: 0 auto;text-align: center;" >
                <p style="position: absolute; top: 47%; display: block;width: 100%;height: 1.5rem;margin-top: -.75rem;margin: 0px;text-align: center; color: #fff;">Member Card <span style="color: #EDCD2D;">${user.mobile}</span></p>
              </div>
              <div class="card-bottom" style="margin-top: .2rem;">
                <p style="margin: 0px;padding-left: .5rem;color: #E0C12B;font-size: .7rem;">Valid Thru
                  <c:choose>
                    <c:when test="${not empty effectiveEnd}">
                      &nbsp;&nbsp;&nbsp;<span style="font-size: .7rem; color: #fff;"><fmt:formatDate value="${effectiveEnd}" pattern="yyyy/MM/dd" /></span>
                    </c:when>
                    <c:otherwise>
                      &nbsp;&nbsp;&nbsp;<span style="font-size: .7rem; color: #fff;">暂未开通</span>
                    </c:otherwise>
                  </c:choose> 
                </p>
              </div>
            </div>
        </div>
        
        <div class="about-title">
          <h5>减脂大作战</h5>
        </div>
        
        <img src="${ctx.resource}/image/member-card/card-bd.png" alt="" style="width: 100%;"/>
        <div style="margin: 1rem auto; text-align: center; height: 11rem;">
          <img alt="" src="${ctx.resource}/image/member-card/fitstart-banner.png" style="width: 80%;">
        </div>
        
      </div>

    </div>
  <!--end current page  -->
  
  </div>

  <%@ include file="/WEB-INF/include/script.jsp"%>
  
  </body>
</html>
